<template>
  <Modal v-model="showAddModal" draggable title="添加人员" @on-ok="ok" @on-cancel="cancel">
    <Form ref="formModel" :label-width="100" label-position="right">
      <FormItem label="角色名称:" prop="name" required>
        <Input type="text" placeholder="请填写角色名称" style="width: 400px;height: 40px;"/>
      </FormItem>
      <FormItem label="添加人员:">
        <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
        <Button icon="ios-add" type="dashed" size="small" @click="handleAdd">添加标签</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script lang="ts">
  import {Component, Vue, Prop} from 'vue-property-decorator';

  @Component
  export default class FormAddModal extends Vue {
    @Prop({type: Boolean})
    readonly showAddModal!: boolean;

    count = [0, 1, 2];

    handleAdd() {
      if (this.count.length) {
        this.count.push(this.count[this.count.length - 1] + 1);
      } else {
        this.count.push(0);
      }
    }

    handleClose2(event, name) {
      const index = this.count.indexOf(name);
      this.count.splice(index, 1);
    }

    ok() {
      this.cancel();
    }

    cancel() {
      const formRef: any = this.$refs['formModel'];
      formRef.resetFields();
      this.$emit('closeModal');
    }
  }
</script>

<style lang="less" scoped>
</style>
